<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width:500px;
            height:500px;
            margin:100px auto 0;
        }
        .wrap h1{
            text-align: center;
        }

        .wrap div{
            height: 400px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 400px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var bgChange = $("#bgChange");
            //给body绑定一个键盘按下事件
            $("body").on("keydown",function(e){
                //给span设置内容
                $("#keyCodeSpan").text(e.keyCode);

                switch(e.keyCode){
                    case 89:
                        //bgChange.css("background","yellow");
                        bgC("yellow");
                        break;
                    case 66:
                        //bgChange.css("background","blue");
                        bgC("blue");
                        break;
                }
            })

            //优化
            function bgC(color){
                bgChange.css("background",color);
            }
        })
    </script>
</head>
<body>
   <div class="wrap">
       <h1>按键变色案例</h1>
       <div id="bgChange">keyCode为：<span id="keyCodeSpan"></span></div>
   </div>
</body>
</html>